<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.3.16-all.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div id="container0" onclick="alert('pai')" style="position:absolute; left: 400px; width: 100px; height:80px; background-color: #CCCCCC">
	Pai
	</div>
	<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
	<div id="container1" style="position:absolute; width: 100px; height:80px; background-color: #DDCDCD">
	Filho
	</div>
</body>

<script type="text/javascript">
	
	jsPlumb.setRenderMode(jsPlumb.CANVAS);
	jsPlumb.Defaults.PaintStyle = {lineWidth:4, strokeStyle: 'rgb(0,0,0)'};
	jsPlumb.draggable("container0");
	jsPlumb.draggable("container1");
	
	var e0 = jsPlumb.addEndpoint("container0", { anchor:"BottomCenter", endpoint:[ "Dot", { radius:5 }]});
	var e1 = jsPlumb.addEndpoint("container1", { anchor:"TopCenter", endpoint:[ "Dot", { radius:5 }]});
	jsPlumb.connect({
						source:e0,
						target:e1,
						connector:[ "Bezier", { curviness:100 }] //connector:[ "FlowChart", { stub:10, gap:10 }],
					});
	
</script>
</html>